<template>
	<view class="content commonPop">
		<view class="addBox">
			<view class="navList" style="height: 98vh;overflow-y: auto;">
				<text @click="changeTab(index)" :class="suo === index?'active':''" v-for="(item,index) in navList" :key="index" style="padding-left: 0rpx;">
					{{item.goodsCategory}}
				</text>
			</view>
			
			<view class="addList" style="width: 100%;">
				<view class="addli" v-for="(item,index) in listData" :key="index"  style="width: 100%;">
					<view class="goodImg">
						<image :src="item.headImg" mode="aspectFill"></image>
					</view>
					<view class="goodInfo"  style="width: 100%;">
						<view class="goodName">
							{{item.goodsName}}
						</view>
						<view class="purchse" >
							<text style="color: red;">￥{{item.price == null?0:item.price}}</text>
							<text class="buyuser">{{item.buyersNum}}人已购买</text>
							<view class="cartBtn" style="float: right;">
								<image src="../../static/cart.png" mode="" @click="doaddCar(item)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<bottomPage :suo="1"></bottomPage>
		
		
		<view class="cartBox">
			<view class="cartInfo">
				<view class="cartBottom">
					
					<view class="cartli cartli1 guanBox">
						<button open-type="contact">
							<image src="../../static/cart1.png" mode=""></image>
							<text>联系客服</text>
						</button>
					</view>
					
					<view class="cartli cartli2"  @click="toOrder">
						<image src="../../static/cart2.png" mode=""></image>
						<text>订单</text>
					</view>
					
					
					<view class="cartli cartli3" @click="showCarList">
						<image src="../../static/cart3.png" mode=""></image>
						<view class="cartNumber">
							{{carList.length}}
						</view>
					</view>
					
					<view class="priceTxt">
						￥{{sumPrice()}}
					</view>
				</view>
				
				<view class="buyBtn" @click="toPay">
					去结算
				</view>
			</view>
		</view>
		
		
		<u-popup :show="show" @close="close" @open="open">
			<view class="gouwuBox">
				<view class="goTitle">购物车</view>
				
				<view class="addressWrap" v-if="address" @click="showAddress">
					<view class="addPosition">
						<image src="../../static/position.png" mode=""></image>
					</view>
					
					<view class="addressInfo">
						<view class="add1">{{address.userName}} {{address.phone}}</view>
						<view class="add2">{{address.address}}</view>
					</view>
				</view>
				
				<view  class="addressWrap"  v-else @click="showAddress">
					<view class="addPosition">
						<image src="../../static/position.png" mode=""></image>
					</view>
					
					<view class="addressInfo">
						<view class="add2">点击选择服务地址</view>
					</view>
				</view>
				
				<view class="addList" style="height: 50vh;overflow-y: auto;border-radius:8rpx;">
					<view  v-for="(item,index) in carList" :key="index">
						<u-swipe-action>
								<u-swipe-action-item
								@click="doDelCar(item)"
								  :options="options1"
								>
								  <view class="addli">
									<view class="goodImg">
										<image :src="item.goodsImage" mode="aspectFill"></image>
									</view>
									<view class="goodInfo"  style="width: 100%;">
										<view class="goodName">
											{{item.goodsName	}}
										</view>
										<view class="purchse" style="width: 100%;">
											<text style="color: red;">￥{{parseFloat(item.price*item.count).toFixed(2)}}</text>
											<view class="cartBtn" style="padding-right: 60rpx;" >
												<u-number-box v-model="item.count" button-size="24" @change="valChange" :name="item.id"></u-number-box>
									
											</view>
										</view>
									</view>
								  </view>
								  
								</u-swipe-action-item>
							  </u-swipe-action>
						
					</view>
				</view>
				
				<view class="addBox3"  style="text-align: center;" @click="toPay">
					去结算
				</view>
				
			</view>
		</u-popup>
		
		
		<u-popup v-if="isAddress" :show="isAddress" :round="10" mode="bottom">
			<view class="addressBox">
				<view class="address_top">
					地址管理
					<view class="closeBtn" @click="isAddress = false">
						
					</view>
				</view>
				<view class="addressList" v-if="addressList.length>0" style="height: 50vh;overflow-y: auto;">
					<view class="adli" @click="chooseAddress(item)" v-for="(item,index) in addressList" :key="index">
						<view class="addName">
							{{item.userName}} {{item.phone}}
						</view>
						<view class="addTxt">
							{{item.address}}
						</view>
						<view class="btnBox">
							<u-checkbox-group>
								<u-checkbox @change.stop="chooseDefalut($event,index)" :checked="item.isDefault == 1" v-model="item.isDefault" shape="circle" label="默认地址"></u-checkbox>
							</u-checkbox-group>
		
							
							<view class="optypeBtn">
								<text @click.stop="editAddress(item)">编辑</text>
								<text @click.stop="deleteAddress(item)">删除</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<u-empty  mode="search" text="无地址记录">
					</u-empty>

				</view>
				<view class="addBox2" @click="isAdd = true" style="text-align: center;">
					新建地址
				</view>
				
			</view>
		</u-popup>	
		
		<u-popup :show="isAdd" :round="10" mode="bottom">
			<view class="addressBox">
				<view class="address_top">
					{{optype == 1?'新增':'修改'}}地址
					<view class="closeBtn" @click="isAdd = false"></view>
				</view>
				<view class="plusBox">
					<view class="plusli">
						所在地区：<input type="text" v-model="addressForm.address" placeholder="省、市、区、街道" />
						<view class="caoBox position" @click="showLocation">
							
						</view>
					</view>
					<view class="plusli plusli2">
						<text>详细地址：</text>
						<textarea name="" id="" v-model="detailAddress" cols="30" rows="10"></textarea>
					</view>
					<view class="plusli">
						联系人：
						<view class="caoBox">
							<input type="text" v-model="addressForm.userName" placeholder="请输入" />
						</view>
					</view>
					<view class="plusli">
						联系方式：
						<view class="caoBox">
							<input type="number"  v-model="addressForm.phone" placeholder="请输入" />
						</view>
					</view>
				</view>
				
				<view class="zhineng">
					<text>智能识别：</text>
					<view class="zhiBox">
						<textarea v-model="zhiTxt" @input="coutTxt" placeholder="[粘贴识别]或输入文本，智能拆分姓名、电话、地址" cols="30" rows="10"></textarea>
						<view class="zhiBtn" v-if="isHide">
							<view class="btn11" @click="cancelInput">取消</view>
							<view class="btn22" @click="shibie">智能识别</view>
						</view>
					</view>
				</view>
				
				<view class="bottomWrap">
					<view class="botButton" @click="isAdd = false">
						取消
					</view>
					<view class="botButton" @click="saveAddress">
						保存
					</view>
				</view>
			</view>	
		</u-popup>
		
	</view>
</template>

<script>
	import bottomPage from '@/components/bottom.vue';
	import { addOrder,payOrder,categoryApi,goodsListApi,addCar,updateCar,delCar,listCar,adressDef,getAddressList,addAddress,modifyAddress,deleteAddressInfo} from '@/api/login.js';
	
	export default {
		components:{
			bottomPage
		},
		data() {
			return {
				show:false,
				isAddress:false,
				isAdd:false,
				isHide:false,
				optype:1,
				options1: [{
					text: '删除'
				}],
				queryItem:{
					goodsType: '',
					status: 'Y',
					pageNum:1,
					pageSize:999
				},
				zhiTxt: '',
				suo: 0,
				navList: [],
				listData: [],
				carList:[],
				address:null,
				addressList:[],
				addressForm:{
					address: '',
					phone: '',
					isDefault: 0,
					userName:''
				},
				detailAddress:""
			}
		},
		onLoad() {
			this.getcategory();
			if(uni.getStorageSync('userToken') == '') {
				
			} else {
				this.getUserDefAddress()
			}
			
		},
		methods: {
			showCarList(){
				if(uni.getStorageSync('userToken') == '') {
					return uni.$u.toast('请先登录！');
				}
				this.show = true;
			},
			toOrder(){
				if(uni.getStorageSync('userToken') == '') {
					return uni.$u.toast('请先登录！');
				}
				
				uni.navigateTo({
					url:"/pages/increment/orderList"
				})
			},
			toPay(){
				if(uni.getStorageSync('userToken') == '') {
					return uni.$u.toast('请先登录！');
				}
				
				if(!this.address){
					uni.$u.toast('请选择服务地址!');
					this.show=true
					return
				}
				if(this.carList.length == 0){
					uni.$u.toast('请选择要购买的增值服务!');
					return
				}
				var  orderDetails= []
				this.carList.forEach(a=>{
					orderDetails.push({
						goodsId:a.goodsId,
						shopCarId:a.id,
						goodsName:a.goodsName,
						goodsImage:a.goodsImage,
						goodsCount:a.count,
						goodsAmont:a.price
					})
					
				});
				addOrder({
					userName:this.address.userName,
					userPhone:this.address.phone,
					userAddress:this.address.address,
					orderDetails:orderDetails
				}).then(res=>{
					if(res.code == 200) {
						var orderNum=res.data
						console.log(orderNum)
						
						payOrder(orderNum).then(res=>{
							if(res.code == 200) {
								console.log(res.data)
								var data = res.data
								wx.requestPayment({ //下面参数为必传
									// provider: 'wxpay', //支付类型
									"appId": "wx380bacc0be9a6e96", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
									"nonceStr": data.nonceStr, // 随机字符串
									"package": data.prepayId, // 固定值
									"timeStamp": data.timeStamp + "", // 时间戳（单位：秒）
									"paySign": data.paySign, // 签名，这里用的 MD5/RSA 签名
									"signType": "RSA",
									success(res) {
										console.log("支付成功", res)
										console.log("完成")
										if (res.errMsg === 'requestPayment:ok') {
											uni.showToast({
												title: "支付成功",
												icon: 'success',
												duration: 2000
											})
											setTimeout(() => {
												uni.hideLoading()
												//跳转我的订单
												uni.redirectTo({
													url:"/pages/increment/orderList?type=1"
												})
											}, 1000);
										}
									},
									fail(err) {
										console.log(err)
										//应该跳转到待支付的订单页面（或者跳转到订单详情页面）
										uni.showToast({
											title: "支付失败",
											icon: 'error',
											duration: 2000
										});				
										uni.hideLoading()
										uni.navigateTo({
											url: "/pages/increment/orderList"
										})
									}
								})
							} else {
								uni.$u.toast(res.msg);
							}
						});
						this.getcarList()
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			doDelCar(item){
				console.log(item)
				delCar(item.id).then(res=>{
					if(res.code == 200) {
						uni.$u.toast('操作成功!');
						this.getcarList()
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			valChange(e){
				console.log(e)
				updateCar({
					id:e.name,
					count:e.value
				}).then(res=>{
					if(res.code == 200) {
						uni.$u.toast('操作成功!');
					} else {
						uni.$u.toast(res.msg);
					}
				});
				
			},
			chooseAddress(val){
				console.log(val);
				this.address = val;
				this.isAddress = false;
			},
			deleteAddress(val){
				console.log(val);
				uni.showModal({
				    title: '提示',
				    content: '确定要删除嘛?',
				    success: res => {
				        if (res.confirm) {
				            console.log('用户点击确定');
							deleteAddressInfo(val.id).then(res=>{
								if(res.code == 200) {
									this.showAddress();
								} else {
									uni.$u.toast(res.msg);
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			editAddress(val) {
				this.optype = 2;
				this.addressForm = JSON.parse(JSON.stringify(val));
				this.isAdd = true;
			},
			
			chooseDefalut(val, index){
				this.addressList[index].isDefault = val?1:0;
				modifyAddress(this.addressList[index]).then(res=>{
					if(res.code == 200) {
						this.showAddress();
					} else {
						uni.$u.toast(res.msg);
					}	
				});
			},
			saveAddress(){
				if(this.addressForm.address == '') {
					return uni.$u.toast('地址不能为空!');
				}
				if(this.addressForm.contactName == '') {
					return uni.$u.toast('联系人不能为空!');
				}
				if(this.addressForm.contactPhone == '') {
					return uni.$u.toast('联系电话不能为空!');
				}
				// console.log(this.addressForm);
				
				if(this.optype == 1) {
					addAddress(this.addressForm).then(res=>{
						if(res.code == 200) {
							uni.$u.toast('操作成功!');
							this.isAdd = false;
							this.showAddress();
						} else {
							uni.$u.toast(res.msg);
						}
					});
				} else {
					modifyAddress(this.addressForm).then(res=>{
						if(res.code == 200) {
							uni.$u.toast('操作成功!');
							this.isAdd = false;
							this.showAddress();
						} else {
							uni.$u.toast(res.msg);
						}
					})
				}
			},
			cancelInput(){
				this.zhiTxt = '';
				this.isHide = false;
			},
			showLocation(){
				uni.authorize({
					scope: 'scope.userLocation',
					success: (ress) => {
						console.log(ress,'===1234')
					  uni.chooseLocation({
						success: (res) => {
							console.log(res);
						  this.addressForm.address = res.address || res.name;
						},
						fail: (error) => {
							console.log(error);
						  uni.showToast({ title: '定位失败', icon: 'none' });
						},
					  });
					},
					fail: () => {
					  uni.showModal({
						title: '授权提示',
						content: '需要您授权地理位置权限',
						success: (modalRes) => {
						  if (modalRes.confirm) {
							uni.openSetting();
						  }
						},
					  });
					},
				});
			},
			shibie(){
				if(String(this.zhiTxt).includes('、')) {
					if(this.countCharacter(this.zhiTxt,'、') == 2) {
						// console.log(this.zhiTxt.split('、'));
						this.addressForm.userName = this.zhiTxt.split('、')[0];
						this.addressForm.phone = this.zhiTxt.split('、')[1];
						this.addressForm.address = this.zhiTxt.split('、')[2];
					} else {
						return uni.$u.toast('输入格式不正确!');
					}
				} else {
					return uni.$u.toast('输入格式不正确!');
				}
			},
			countCharacter(str, char) {
			    return str.split('').reduce((count, c) => count + (c === char ? 1 : 0), 0);
			},
			coutTxt(){
				if(this.zhiTxt != '') {
					this.isHide = true;
				} else {
					this.isHide = false;
				}
			},
			showAddress(){
				getAddressList().then(res=>{
					if(res.code == 200) {
						this.addressList = res.rows;
						this.isAddress = true;
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			getUserDefAddress(){
				adressDef().then(res=>{
					if(res.code == 200) {
						this.address = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			 open() {
			      },
			      close() {
			        this.show = false
			      },
			sumPrice(){
				var price=0;
				
				for(var i=0;i<this.carList.length;i++){
					price=price+this.carList[i].price*this.carList[i].count
				}
				return  parseFloat(price).toFixed(2)
				
			},
			
			getcarList(){
				listCar(this.queryItem).then(res=>{
					if(res.code == 200) {
						this.carList = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			doaddCar(goods){
				if(uni.getStorageSync('userToken') == '') {
					return uni.$u.toast('请先登录！');
				}
				
				addCar(
				{
					goodsId:goods.id,
					goodsImage:goods.images,
					goodsName:goods.goodsName,
					price:goods.price
				}
				).then(res=>{
					if(res.code == 200) {
						uni.$u.toast("加入成功");
						this.getcarList()
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			getcategory(){
				categoryApi().then(res=>{
					if(res.code == 200) {
						this.navList = res.rows;
						if(this.navList.length>0){
							this.queryItem.goodsType = this.navList[0].id;
							if(uni.getStorageSync('userToken') == '') {
								
							} else {
								this.getcarList();
							}
							this.getGoodsList();
						}
						
						
					} else {
						uni.$u.toast(res.msg);
					}
				})
				
			},
			getGoodsList(categoryId){
				goodsListApi(this.queryItem).then(res=>{
					if(res.code == 200) {
						res.rows.forEach(item=>{
							item.headImg = String(item.images).split(',')[0]
						});
						this.listData = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			changeTab(index){
				this.suo = index;
				this.queryItem.goodsType = this.navList[index].id;
				this.getGoodsList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addBox3{
		background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);border-radius:68rpx;font-weight:500;
		text-align: center;width:704rpx;height:80rpx;@include baseFont(30rpx,#fff,80rpx);
		margin:90rpx 0 68rpx;
	}
	.gouwuBox{
		background-color:#f5f5f5;padding:24rpx;border-radius:32rpx 32rpx 0 0;
		.goTitle{
			@include baseFont(32rpx,#333,44rpx);text-align: center;font-weight:500;margin-bottom:26rpx;
		}
		.addressWrap{
			@include flx;background: #FFFFFF;border-radius: 8rpx;padding:32rpx 30rpx;margin-bottom:18rpx;
			.addPosition{
				margin-right:26rpx;
				image{
					display: block;width:22rpx;height:32rpx;margin-top:28rpx;
				}
			}
			.addressInfo{
				.add1{
					@include baseFont(30rpx,#262626,46rpx);
				}
				.add2{
					@include baseFont(26rpx,#8C8C8C,40rpx);
				}
			}
		}
	}
	.cartBox{
		.cartInfo{
			position: fixed;bottom:206rpx;left:0;width:100%;background: #FFFFFF;height:112rpx;@include flx;justify-content:space-between;
			box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.04), 0px 0px 24rpx -8rpx rgba(0,0,0,0.03);align-items: center;
			.cartBottom{
				@include flx;align-items: center;
				.cartli{
					position: relative;
					image{
						display: block;width:32rpx;height:32rpx;margin:0 auto;
					}
					text{
						display: block;@include baseFont(20rpx,#666,28rpx);margin-top:2rpx;
					}
				}
				.cartli1{
					padding-left:20rpx
				}
				.priceTxt{
					@include baseFont(32rpx,#FF6600,112rpx);font-weight:500;
				}
				
				.cartli2{
					padding:0 22rpx 0 16rpx;
				}
				.cartli3{
					margin:0 40rpx 0 24rpx;
					image{
						width:48rpx!important;height:48rpx!important;
					}
					.cartNumber{
						width: 38rpx;height: 24rpx;background: #FF6600;border-radius: 24rpx;text-align: center;
						border: 2rpx solid #FF6600;position: absolute;right:-26rpx;top:0;@include baseFont(20rpx,#fff,24rpx);
					}
				}
				.cartli2::after{
					content:'';width: 2rpx;height: 36rpx;background: #D9D9D9;position: absolute;right:0;
					top:50%;transform: translateY(-50%)
				}
			}
			.buyBtn{
				width: 236rpx;height: 80rpx;background: linear-gradient( 40deg, #3671E9 0%, #749FF6 100%);
				border-radius: 40rpx;@include baseFont(32rpx,#fff,80rpx);font-weight:500;text-align: center;
				margin:0 24rpx 0 0;
			}
		}
	}
	.addressBox{
		background-color:#F5F5F5;padding:24rpx;border-radius:16rpx 16rpx 0 0;
		.address_top{
			@include baseFont(32rpx,#333,44rpx);text-align: center;font-weight:500;margin-bottom:26rpx;position: relative;
			.closeBtn{
				width:24rpx;height:24rpx;background:url('../../static/closeBtn.png') no-repeat;background-size:24rpx;
				position: absolute;top:50%;right:0;transform: translateY(-50%);
			}
		}
		.bottomWrap{
			height:180rpx;box-shadow: 0px -4rpx 16rpx 0px #0000000A;box-shadow: 0px 0px 24rpx -8rpx #00000008;
			@include flx;justify-content: space-between;margin-top:14rpx;
			.botButton{
				width:336rpx;height:80rpx;background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);text-align: center;
				border-radius:68rpx;@include baseFont(30rpx,#fff,80rpx);font-weight:500;margin-top:18rpx;
			}
			// .botButton:first-of-type{
			// 	margin-left:24rpx;
			// }
			// .botButton:last-of-type{
			// 	margin-right:24rpx;
			// }
		}
		.zhineng{
			background-color:#fff;border-radius:12rpx;padding:32rpx;
			text{
				display: block;@include baseFont(30rpx,#333,42rpx);padding:0 0 20rpx;
			}
			.zhiBox{
				position: relative;
				.zhiBtn{
					position: absolute;bottom:20rpx;right:32rpx;z-index: 9999;
					@include flx;
					.btn11{
						@include baseFont(26rpx,#979797,48rpx);margin-right:24rpx;
					}
					.btn22{
						width: 144rpx;height: 48rpx;background: linear-gradient( 90deg, #6696F9 0%, #3671E9 100%);
						border-radius: 48rpx;text-align: center;@include baseFont(26rpx,#fff,48rpx);
					}
				}
				textarea{
					display: block;background-color:#F6F6F6;border-radius:8rpx;width:calc(100% - 40rpx);padding:20rpx 20rpx;
					@include baseFont(28rpx,#333,40rpx);height:122rpx;
				}
			}
			
		}
		.plusBox{
			background-color:#fff;border-radius:12rpx;margin-bottom:16rpx;
			.plusli{
				@include flx;justify-content: space-between;border-bottom:1px solid #F0F0F0;
				@include baseFont(30rpx,#333,112rpx);padding:0 32rpx;align-items: center;
				input{
					@include baseFont(30rpx,#333,112rpx);height:112rpx;text-align: right;
				}
				textarea{
					display: block;background-color:#F6F6F6;border-radius:8rpx;width:calc(100%-40rpx);
					@include baseFont(28rpx,#333,40rpx);height:92rpx;margin-bottom:32rpx;padding:14rpx 20rpx;
				}
				.caoBox{
					
				}
				.position{
					width:22rpx;height:32rpx;background: url('../../static/position.png') no-repeat; 
					background-size:22rpx 32rpx; 
				}
			}
			.plusli2{
				justify-content: inherit;display: inherit;
				text{
					display: block;line-height:38rpx;padding:32rpx 0 16rpx;
				}
			}
		}
		.reservationList{
			text{
				display: block;background-color:#fff;width:100%;height:112rpx;text-align: center;border-radius:8rpx;
				margin-bottom:16rpx;@include baseFont(30rpx,#262626,112rpx);font-weight:500;
			}
			.active{
				background-color:#E8EFFF;
			}
		}
		.addBox2{
			background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);border-radius:68rpx;font-weight:500;
			text-align: center;width:704rpx;height:80rpx;@include baseFont(30rpx,#fff,80rpx);
			margin:90rpx 0 68rpx;
		}
		.addressList{
			.adli{
				box-shadow: 0px -1px 0px 0px #F0F0F0 inset;background-color:#fff;border-radius:8rpx;margin-bottom:12rpx;
				padding:0 32rpx;
				.addName{
					@include baseFont(30rpx,#262626,38rpx);font-weight:500;padding:32rpx 0 8rpx;
				}
				.addTxt{
					@include baseFont(26rpx,#8C8C8C,32rpx);padding-bottom:24rpx;border-bottom:1px solid #F0F0F0;
				}
				.btnBox{
					@include flx;justify-content: space-between;padding:24rpx 0 32rpx;align-items: center;
					.chooseBtn{
						@include flx;@include baseFont(28rpx,#8C8C8C,40rpx);
					}
					.optypeBtn{
						font-size:0;
						text{
							@include baseFont(28rpx,#8C8C8C,36rpx);display: inline-block;padding-left:44rpx;
						}
						text:first-of-type{
							background: url('../../static/editBtn.png') no-repeat left center;
							background-size:32rpx;
						}
						text:last-of-type{
							background: url('../../static/deleteBtn.png') no-repeat left center;
							background-size:32rpx;margin-left:40rpx;
						}
					}
					
				}
			}
		}
	}
.content{
	background-color:#F4F5F7;padding-top:16rpx;
	.addBox{
		@include flx;
		.navList{
			width:300rpx;
			text{
				display: block;@include baseFont(28rpx,#262626,100rpx);text-align: center;position: relative;
			}
			.active{
				background-color:#fff;color:#3671E9;
			}
			.active::after{
				content:'';width:6rpx;height:32rpx;background-color:#3671E9;border-radius:4rpx;
				position: absolute;left:0;top:50%;transform: translateY(-50%);
			}
		}
		.addList{
			background-color:#fff;padding:30rpx 24rpx 0;
			.addli{
				@include flx;margin-bottom:32rpx;
				.goodImg{
					margin-right:16rpx;
					image{
						display: block;width:156rpx;height:120rpx;border-radius:6rpx;
					}
				}
				.goodInfo{
					.goodName{
						@include baseFont(28rpx,#262626,36rpx);font-weight:500;margin:16rpx 0 12rpx;
					}
					.purchse{
						@include flx;justify-content: space-between;align-items: center;
						.buyuser{
							display: block;width:136rpx;height:36rpx;border: 0.5px solid #C4C4C4;
							@include baseFont(20rpx,#262626,36rpx);text-align: center;border-radius:6rpx;
						}
						.cartBtn{
							image{
								display: block;width:40rpx;height:40rpx;
							}
						}
					}
				}
			}
		}
	}
}

.addList{
			background-color:#fff;padding:30rpx 24rpx 0;
			.addli{
				@include flx;margin-bottom:32rpx;
				.goodImg{
					margin-right:16rpx;
					image{
						display: block;width:156rpx;height:120rpx;border-radius:6rpx;
					}
				}
				.goodInfo{
					.goodName{
						@include baseFont(28rpx,#262626,36rpx);font-weight:500;margin:16rpx 0 12rpx;
					}
					.purchse{
						@include flx;justify-content: space-between;align-items: center;
						.buyuser{
							display: block;width:136rpx;height:36rpx;border: 0.5px solid #C4C4C4;
							@include baseFont(20rpx,#262626,36rpx);text-align: center;border-radius:6rpx;
						}
						.cartBtn{
							image{
								display: block;width:40rpx;height:40rpx;
							}
						}
					}
				}
			}
		}
</style>
